/* 轮播图组件 */
<template>
    <div class="block">
        <el-carousel :interval="3000" height="200px">
            <el-carousel-item v-for="(item, index) in bannerData" :key="index">
                <img :src="item.imageUrl" alt="Carousel Image" class="carousel-image">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps(['bannerData']);
</script>

<style scoped>
/* 确保图片填充整个轮播项 */
.carousel-image {
    width: 100%;
    height: 100%;
    /* object-fit 属性是关键 */
    /* cover: 裁剪图片以填充容器，保持宽高比 */
    object-fit: cover;
    /* contain: 完整显示图片，可能留白，保持宽高比 */
    /* object-fit: contain; */
    /* fill: 拉伸图片以填充容器，不保持宽高比 */
    /* object-fit: fill; */
}

/* 调整 el-carousel-item 的样式，确保图片可以占据全部空间 */
/* Element Plus 的 el-carousel-item 默认会有一个 padding，需要覆盖掉 */
.el-carousel__item {
    display: flex; /* 使用 flexbox 居中图片，或者确保图片完全填充 */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 防止图片溢出 */
}

/* 调整 h3 标签的样式，如果你决定保留它的话 */
/* h3 标签会默认有一些外边距，可能会影响图片显示 */
/*
.el-carousel__item h3 {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; // 可以添加背景色方便调试
}
*/
</style>